---
title: Installation in React Native | gluestack-ui

description: In this guide, we will walk you through the steps required to add gluestack-ui to your React Native project. You can create a new React Native project using React Native CLI. We will cover initial setup, configuring the provider, and adding a new component.

pageTitle: Install in React Native

pageDescription: In this guide, we will walk you through the steps required to add gluestack-ui to your React Native project. You can create a new React Native project using React Native CLI. We will cover initial setup, configuring the provider, and adding a new component.

showHeader: true
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

import { AppProvider, Link, Box, HStack, Text } from '@gluestack/design-system';

<Meta title="ui/Guides/Guides/Install in React Native" />

## New Project

If you are starting with a new project, you can use `npx` to create a new project with `gluestack-ui`.

```bash
npm create gluestack
```

## Existing Project

If you wish to install `gluestack-ui` into your existing project, you can proceed with the following steps:

### Step 1: Installation and Initial Setup

First, install the latest version of gluestack-ui and its peer dependencies in your project. This can be done using the following command:

```bash
yarn add @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
```

OR

```bash
npm i @gluestack-ui/themed @gluestack-style/react react-native-svg@13.4.0
```

### Step 1.5: Default Theme (Optional)

`gluestack-ui` is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer. However, if you want to use the default theme, you can install `@gluestack-ui/config` as well.

```bash
yarn add @gluestack-ui/config@latest
```

OR

```bash
npm i @gluestack-ui/config@latest
```

### Step 2: Configure the GluestackUIProvider

The `GluestackUIProvider` is a component that provides aliases and tokens throughout your app, using React's Context API. It should be added to the root of your app.

You can update your `App.tsx` file as follows:

```jsx
import { GluestackUIProvider, Text } from '@gluestack-ui/themed';
import { config } from '@gluestack-ui/config'; // Optional if you want to use default theme

export default function App() {
  return (
    <GluestackUIProvider config={config}>
      <Text>Hello World!</Text>
    </GluestackUIProvider>
  );
}
```

This ensures that all components are wrapped with `<GluestackUIProvider />`, and the theme from `@gluestack-ui/config` is applied.

This guide should help you get started with gluestack-ui in your expo project. If you run into any issues or have further questions, please refer to the official documentation or community forums.
